<template>
    <div class="headtop">
        <div class="headbody" v-if="business.id">
            <div>
                <van-image width="5rem" height="5rem" fit="cover" radius="1.2rem" :src="avatarimg" />
            </div>
            <div>
                <p class="">{{ business.username }}</p>
                <p class="">账号：{{ business.usernumber }}</p>
                <p class="">会员：{{ business.vipendtime_text }}</p>
            </div>
        </div>

        <div style="margin-top: 0.5rem;" v-show="business.id">
            <van-uploader style="cursor: pointer;" :after-read="afterRead" :max-count="1"
                accept="image/jpeg,image/png,image/webp,image/bmp,image/tiff">
                <p class="editimg" style="margin-left: 1rem;"><van-icon name="edit" />更换头像</p>
            </van-uploader>
        </div>
    </div>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <!-- 用户名 -->
            <van-field v-model="username" name="username" label="用户名：" placeholder="请输入用户名" class="editfield"
                @change="ChangeUsername" />

        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="onSubmit" class="sub">
                提交
            </van-button>
        </div>
        <div style="margin: 16px;">
            <van-button round block type="primary" @click="onBack" class="back">
                返回
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const business = ref(proxy.$business.value)
const avatarimg = ref(business.value.avatar_text)
const username = ref(business.value.username)

const params = {
    id: business.value.id
}

// 用户名
const ChangeUsername = (e) => {
    params.username = username.value;
    // formData.append('username', username.value);
}

//头像上传
const afterRead = async (file) => {
    avatarimg.value = file.objectUrl;
    params.avatar = file.file

    // formData.append('avatar', file.file);
    const res = await proxy.$http.upload({
        url: '/user/avatar',
        params
    })

    if (res.code == 1) {
        proxy.$toast(res.msg)
        proxy.$router.push('/user')
    } else {
        proxy.$toast(res.msg)
    }
};

// 提交
const onSubmit = async () => {
    const res = await proxy.$http.upload({
        url: '/user/editusername',
        params: params,
    })
    if (res.code == 1) {
        proxy.$success(res.msg)
        setTimeout(() => {
            proxy.$router.push('/user')
        }, 1250)
    } else {
        proxy.$fail(res.msg)
    }
}

// 返回
const onBack = () => {
    proxy.$router.push('/user')
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.headtop {
    width: 100%;
    height: 9.5rem;
    background-color: rgb(25, 25, 25);
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 处理bug */
    margin-bottom: 0.5rem;
}

.headbody {
    display: flex;
    width: 100%;
    height: 5rem;
    margin-top: 1.5rem;
}

.headbody div {
    margin-left: 0.5rem;
}

.headbody div>p:nth-child(1) {
    font-size: 1.3rem;
    line-height: 2rem;
    /* 缩进 */
    text-indent: 0.8rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.headbody div>p:nth-child(2) {
    font-size: 1rem;
    line-height: 2rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

.headbody div>p:nth-child(3) {
    font-size: 0.8rem;
    line-height: 1rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

#login {
    text-decoration: underline;
    margin-top: 50%;
    transform: translateY(-50%);
    font-size: 1.7rem;
    opacity: 0.7;
}


#login:hover {
    color: purple;
}

.router-link {
    display: block;
    width: 100%;
    height: 4.5rem;
    font-size: 1.2rem;
    line-height: 4.5rem;
    background-color: rgba(25, 25, 25);
    border-top: rgba(255, 255, 255, 0.1) solid 0.1rem;
    color: aliceblue;
}

.router-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: purple;
}

.right-icon {
    float: right;
    margin-right: 1rem;
    line-height: 4rem;
}

.del-p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logout:hover {
    color: rgb(58, 129, 192);
}

.editavatar:hover {
    color: rgb(34, 46, 57);
}

.editimg {
    margin-left: 1rem;
    margin-top: 0.5rem;
    /* 下划线*/
    text-decoration: underline;
    background: linear-gradient(90deg,
            rgba(209, 64, 64, 0.8),
            rgba(117, 250, 255, 0.9),
            rgba(255, 77, 181, 0.8));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(255, 77, 181, 0.2);
    animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
        text-shadow: 0 1px 2px rgb(250, 71, 71);
    }

    50% {
        background-position: 100% center;
        text-shadow: 0 2px 3px rgb(93, 188, 243);
    }

    100% {
        background-position: 0% center;
        text-shadow: 0 1px 2px rgba(244, 70, 171, 0.2);
    }
}

.editfield {
    height: 4rem;
    line-height: 3rem;
    background-color: rgb(25, 25, 25);
    font-size: 1.1rem;
    --van-field-input-text-color: rgb(255, 255, 255);
    --van-field-placeholder-text-color: rgba(255, 255, 255, 0.45);
    --van-field-label-color: aliceblue;
}

.editfield .van-field__right-icon {
    align-self: center !important;
    margin-top: 0 !important;
}

.sub {
    background: linear-gradient(-45deg,
            rgba(227, 67, 67, 0.6),
            rgba(41, 189, 203, 0.7),
            rgba(53, 113, 196, 0.8),
            rgba(195, 40, 169, 0.7),
            rgba(231, 79, 130, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
    font-size: 1.1rem;
}

.back {
    background: linear-gradient(-45deg,
            rgba(227, 67, 67, 0.6),
            rgba(195, 40, 169, 0.7),
            rgba(53, 113, 196, 0.8),
            rgba(41, 189, 203, 0.7),
            rgba(227, 67, 67, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
    font-size: 1.1rem;
}

@keyframes fluidGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
.sub:hover {
    transform: translateY(-3px);
    transform: scale(1.1);
}

.back:hover {
    transform: translateY(-3px);
    transform: scale(1.1);
}

</style>
